<!--
 * @Author: wang_jl
 * @Date: 2021-07-20 11:53:19
 * @LastEditTime: 2022-04-12 09:12:20
 * @LastEditors: wei_jt@ecidi.com
 * @Description: 注册页面
-->
<template>
  <div class="register_container">
    <img class="login-logo" src="@/assets/img/login/logo-orange.png" />
    <div class="edit-container">
      <div class="edit-img">
        <img src="@/assets/img/login/edit.png" alt="" />
      </div>
      <fks-form
        ref="Form"
        label-position="left"
        :model="Form"
        :rules="rules"
        label-width="110px"
      >
        <fks-form-item :label="LANG.USERNAME" prop="userName">
          <fks-input
            v-model="Form.userName"
            maxlength="50"
            show-word-limit
            :placeholder="LANG.ACCOUNT_NAME"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.USER_FULL_NAME" prop="userFullname">
          <fks-input
            v-model="Form.userFullname"
            maxlength="50"
            show-word-limit
            :placeholder="LANG.INPUT_USERFULLNAME"
          />
        </fks-form-item>
        <fks-form-item prop="password">
          <span slot="label">
            {{ LANG.PASSWORD }}
            <fks-tooltip placement="right">
              <div
                slot="content"
                style="font-size: 14px; line-height: 20px"
                class="tips-container"
              >
                <span style="font-size: 14px">
                  {{ LANG.PASSWORD_TIP }}{{ accountConfig.pwMinLength }}-{{
                    accountConfig.pwMaxLength
                  }}
                </span>
                <span
                  v-if="
                    accountConfig.charDemand == '1' &&
                    accountConfig.passwordLevel == 'custom'
                  "
                  >{{ LANG.PASSWORD_TIP1 }}</span
                >
                <span
                  v-if="
                    accountConfig.charDemand == '2' &&
                    accountConfig.passwordLevel == 'custom'
                  "
                  >{{ LANG.PASSWORD_TIP2 }}</span
                >
                <span
                  v-if="
                    accountConfig.charDemand == '3' &&
                    accountConfig.passwordLevel == 'custom'
                  "
                  >{{ LANG.PASSWORD_TIP3 }}</span
                >
                <span v-if="accountConfig.sensitiveInfo == true">{{
                  LANG.SENSITIVE_INFO_TIP
                }}</span>
              </div>
              <i class="fks-icon-question" />
            </fks-tooltip>
          </span>
          <fks-input
            v-model="Form.password"
            show-password
            maxlength="50"
            :placeholder="LANG.ACCOUNT_PWD"
          />
        </fks-form-item>

        <fks-form-item :label="LANG.CONFIRM_PASSWORD" prop="confirmPassword">
          <fks-input
            v-model="Form.confirmPassword"
            show-password
            maxleng="50"
            :placeholder="LANG.ENTER_CONFIRM_PASSWORD"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.PHONE" prop="phone">
          <fks-input
            v-model="Form.phone"
            :placeholder="LANG.PHONE_TIP"
            maxlength="11"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.CAPTCHA"
          class="tel_code"
          prop="captcha_code"
        >
          <fks-input
            v-model="Form.captcha_code"
            :placeholder="LANG.ACCOUNT_CAPTCAH"
          >
            <fks-button
              slot="append"
              type="primary"
              :loading="smsLoading"
              @click="getRegisterSMSCaptcha"
            >
              <span v-if="countDown != -1 && countDown != -2" class="word">{{
                countDown + 's'
              }}</span>
              <span v-if="countDown != -1 || countDown != -2" class="word">{{
                countDown == -2 ? LANG.GET_CAPTCHA : LANG.REGAIN_CAPTCHA
              }}</span>
            </fks-button>
          </fks-input>
        </fks-form-item>
      </fks-form>
      <div class="register_button">
        <fks-button class="register_btn" type="primary" @click="submit">
          {{ LANG.REGISTER_NOW }}
        </fks-button>
        <div class="skipToLogin">
          <fks-button text @click="backToLogin">
            {{ LANG.HAVE_ACCOUNT_TO_LOGIN }}
          </fks-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRegisterSMSCaptcha } from './api'
import { userRegister } from './api'
import { mapState } from 'vuex'
import * as stateTypes from '@/store/State/stateTypes'
import { pwdEncrypt } from '@/utils/encryption/pwd'
import { pwdRuleCheck } from '@/utils/password'
import { GRANT_TYPE } from '@/config/enums'

export default {
  name: 'Login',
  data() {
    return {
      countDown: -2,
      smsLoading: false,
      captcha_key: '',
      Form: {
        userName: '',
        password: '',
        confirmPassword: '',
        phone: '',
        captcha_code: '',
        userFullname: ''
      },
      registerForm: {},
      copyPassword: ''
    }
  },
  computed: {
    rules() {
      return {
        userName: [
          {
            required: true,
            message: this.LANG.USERNAME_NOT_EMPTY,
            trigger: 'blur'
          },

          {
            pattern: /^[a-z][a-z0-9_]*$/g,
            message: this.LANG.USERNAME_ACCORDING_TIP,
            trigger: 'blur'
          }
        ],
        userFullname: [
          {
            required: true,
            message: this.LANG.USERFULLNAME_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.LANG.PASSWORD_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          {
            required: true,
            message: this.LANG.CONFIRM_PASSWORD_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: this.LANG.PHONE_NOT_EMPTY,
            trigger: 'blur'
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: this.LANG.FORMAT_ERROR
          }
        ],
        captcha_code: [
          {
            required: true,
            message: this.LANG.CAPTCHA_NOT_EMPTY,
            trigger: 'blur'
          }
        ]
      }
    },
    ...mapState([stateTypes.ACCOUNT_CONFIG])
  },
  methods: {
    //登录时转换处理登录数据
    getLoginForm() {
      let form = {}
      form.grant_type = GRANT_TYPE.PASSWORD
      form.username = this.registerForm.userName
      if (this.copyPassword) {
        form.password = pwdEncrypt(this.copyPassword)
      } else {
        form.password = this.copyPassword
      }
      return form
    },
    //登录成功时更新缓存
    updataStorage() {
      this.$storage.set('login_type', this.type)
      if (this.remember) {
        this.$storage.set('rememberMe', this.remember)
        this.$storage.set(
          'password',
          //window对象方法，创建一个base-64 编码的字符串。同步操作
          window.btoa(this.copyPassword)
        )
      }
    },
    //提交注册数据
    submit() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          if (pwdRuleCheck(this.Form.password)) {
            if (this.Form.confirmPassword != this.Form.password) {
              return this.$message.error(this.LANG.CONFIRM_NEW_PWD_TIP)
            }
            //给密码md5加密处理
            // for (let i in this.Form) {
            //   if (i == 'password') {
            //     this.copyPassword = this.Form[i]
            //     this.Form[i] = pwdEncrypt(this.copyPassword)
            //   }
            // }
            this.copyPassword = this.Form.password
            this.registerForm = {
              phone: this.Form.phone,
              captcha: this.Form.captcha_code,
              key: this.captcha_key,
              userName: this.Form.userName,
              password: pwdEncrypt(this.Form.password),
              userFullname: this.Form.userFullname
            }
            userRegister(this.registerForm)
              .then((res) => {
                if (res.status) {
                  this.$message.success(this.LANG.REGISTER_SUCCESS)
                  //注册成功后开始登录
                  let loginData = this.getLoginForm()
                  this.$store
                    .dispatch('userLogin', loginData)
                    .then((res) => {
                      this.updataStorage()
                      this.redirectTo()
                    })
                    .catch((err) => {
                      this.$router.replace('/login')
                    })
                }
              })
              .catch(() => {})
          } else {
            this.$message.error(this.LANG.PASSWORD_VALID_TIP)
          }
        }
      })
    },
    //返回登录页
    backToLogin() {
      this.$router.push('/login')
    },
    //获取注册短信验证码
    getRegisterSMSCaptcha() {
      this.$refs.Form.validateField('phone', (valid) => {
        if (!valid) {
          if (this.countDown < 0 && this.Form.phone) {
            this.smsLoading = true
            getRegisterSMSCaptcha({ phone: this.Form.phone })
              .then((res) => {
                this.smsLoading = false
                if (res.status) {
                  this.captcha_key = res.data
                  this.updataCountDown()
                }
              })
              .catch((err) => {
                this.smsLoading = false
                // this.updataCountDown()
              })
          } else {
            if (this.countDown < 0) {
              this.$message.warning(this.LANG.PHONE_NOT_EMPTY)
            }
          }
        }
      })
    },
    //更新获取短信验证码的时间
    updataCountDown() {
      this.smsLoading = false
      this.countDown = 60
      const count = setInterval(() => {
        if (this.countDown == 0) {
          clearInterval(count)
          this.countDown = -1
        } else {
          this.countDown--
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.register_container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .login-logo {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 100px;
  }

  .edit-container {
    width: 370px;

    .edit-img {
      margin-bottom: 28px;
      text-align: center;
    }

    ::v-deep .fks-form-item__error {
      white-space: nowrap;
    }

    ::v-deep .fks-input__inner {
      height: 40px;
      padding-right: 0;
      padding-left: 0;
      border: 1px solid rgba(225, 226, 228, 1);
      border-radius: 4px;
      font-size: 14px;
      text-indent: 16px;
      background: rgba(255, 255, 255, 1);
    }

    ::v-deep .tel_code {
      .fks-input__inner {
        width: 150px;
      }

      .fks-input-group__append {
        width: 100px;
        padding: 0 10px;
        border: 1px solid var(--theme-color);
        border-radius: 4px;
        text-align: center;

        .fks-button {
          padding: 8px 10px;
        }

        .word {
          height: 19px;
          font-size: 14px;
          font-family: MicrosoftYaHei, sans-serif;
          line-height: 19px;
          color: var(--theme-color);
        }
      }
    }

    .skipToLogin {
      margin-top: 10px;
      font-size: 14px;
    }

    .register_button {
      width: 340px;
      margin: 20px auto 0;

      ::v-deep .register_btn {
        width: 340px;
        height: 52px;
        font-size: 18px;
        line-height: 25px;
      }
    }
  }
}
</style>